ID

Sets the string that identifies the control on an XForm. If not specified, a unique ID is automatically generated.

Class Name

className

Sets or retrieves the class name applied on the control

Chart Type

Sets the type of chart from among the available chart types. The following options are available to display multi-column data in a chart:

• Column 2D - This chart type displays values in vertical columns, in 2-dimensional format. It is used to present a clear snapshot of the entire data.
• Column 3D - This chart type displays values in vertical columns, in 3-dimensional format. It is used to present a clear snapshot of the entire data.
• Line 2D - This chart type displays a set of data points connected by a line, in 2-dimensional format. It is used to display the trend of a specific value over a period of time.
• Area 2D - This is similar to the Line 2D chart with the area below the line filled with color to delineate and highlight the actual data.
• Bar 2D - This chart displays values in horizontal bars in 2-dimensional format. It is used when the emphasis is on the categories that appear on the Y-Axis.
• Bar 3D - This chart displays values in horizontal bars in 3-dimensional format. It is used when the emphasis is on the categories that appear on the Y-Axis.
• Scroll Column 2D - This chart type displays values in vertical columns in 2-dimensional format, with an additional facility to scroll on the X-Axis. It is used where the data is large and will be congested if it is presented in the Column 2D chart type.
• Scroll Line 2D - This chart type displays a set of data points connected by a line in 2-dimensional format, with an additional facility to scroll on the X-Axis. It is used where the data is large and cannot be presented clearly if a Line 2D chart type is used.
• ScrollStackedColumn 2D - This chart type displays several data values stacked in a column and presented in 2-dimensional format. The chart also features a scroll bar on the X-Axis to accommodate large data. This chart is used to view and compare values of individual contributions to a total, across several categories.
• StackedColumn 2D - This chart type displays comparative values of a category together in a column, presented in 2-dimensional format. This chart is used when you need to know the contributions of each stacked value to the total.
• StackedColumn 3D - This chart type displays comparative values of a category together in a column, presented in 3-dimensional format. This chart is used when you need to know the contributions of each stacked value to the total.
• StackedBar 2D - This chart type displays comparative values of a category together in a horizontal bar, presented in 2-dimensional format. This chart is useful when you need to know the contributions of each stacked value to the total. It is used when the emphasis is on the categories that appear on the Y-Axis.
• StackedBar 3D - This chart type displays comparative values of a category together in a horizontal bar, presented in 3-dimensional format. This chart is useful when you need to know the contributions of each stacked value to the total. It is used when the emphasis is on the categories that appear on the Y-Axis.

Caption

Sets the caption

X-Axis Label

Sets the label to be displayed on the x-axis

Y-Axis Label

Sets the label to be displayed on the y-axis

Y-Axis Minimum Value

Sets the minimum value that can be displayed on the y-axis

Y-Axis Maximum Value

Sets the maximum value that can be displayed on the y-axis

Color

The Color of the chart contents. If this field is left blank, the default colors are displayed. However, if you want to display the chart values in different colors, you need to provide the hexadecimal Color code for each value and use (,) as a separator. For example, if there are three values and you want them to be represented in three colors - Blue, Green, and Red; you need to provide the following values in the field - 0000FF, 00FF00, FF0000.

Animation

Enables an animation effect when the chart is rendered

Dynamic Chart Type

Denotes whether the option to change the chart type (dynamically) is shown or hidden at runtime. The chart options display in a drop-down list at runtime.

Highlight Active Record

Highlights a chart element when you select the corresponding record

Show All Records

Enables the display of all available records in the chart

Truncate X-Axis Labels

Reduces the length of the X-Axis labels if they are very long and cross the chart boundary

X-Axis Label Style

The style in which the labels are presented on the chart. This option is useful when accommodating long labels. The available options are:

• Rotate - Rotates the labels in a direction so that the entire label is visible completely occupying lesser chart area
• Stagger - Places the labels across rows so that there is enough space between labels if they are positioned in the same row. The number of rows may increase or decrease depending upon the number of labels to be displayed.
• Wrap - Wraps long labels within a specific width so that they are accommodated in multiple lines
• Slant - Makes the labels appear slantingly so that they are conveniently accommodated in the available chart area

XML

Provide the XML structure that defines the properties of the chart. The syntax of the XML structure is as below.

<xml id="\[id\]">
   <root>
        <\[propertyname\]>\[value\]</\[propertyname\]>
        ...
        <\[propertyname\]>\[value\]</\[propertyname\]>
   </root>
</xml>

You can use the XML to set properties of the chart. The properties are set on the <chart> element in the XML of the Fusion Chart.
Example
A sample XML for the Multi Series chart is as below:

<xml id="myProperties">
    <chartProperties>
        <baseFontColor>FF00FF</baseFontColor>
        <useRoundEdges>1</useRoundEdges>
        <showPlotBorder>1</showPlotBorder>
        <plotBorderColor>00FF00</plotBorderColor>
        <plotBorderThickness>4</plotBorderThickness>
        <divLineThickness>3</divLineThickness>
        <divLineColor>0000FF</divLineColor>
        <numberPrefix>$</numberPrefix>
        <logoURL>http://www.contactcenterworld.com/images/company/CORDYS--medium-logo.jpg</logoURL>
        <logoPosition>TR</logoPosition>
    </chartProperties>
</xml>

Data Click

This event (ondataclick) is activated when you click a data plot. You can define the event logic on the Script tab of the XForm.

addListener()

Registers the control to receive notifications for an event

setDataColor(dataColor)

Sets the color for each range in a chart. The colors are applied to consecutive ranges in the order defined in this method. For example, as depicted in the below example, the first range will display the first color (OOFFFF), the second range will display the second color (FFOOFF), and so on. If the ranges are in excess of the colors defined, the extra ranges will display default colors.

Example

chartObj.setDataColor(["00FFFF", "FF00FF", "FFFF00"]);

Use the render() method to retrieve and display changes in the UI.

setDataColorFromLabel(dataColorObject)

Sets the color for each data plot in a chart based on the name of the label.

Example

chartObj.setDataColorFromLabel({"name1" : "00FFFF" ,"name2" : "FF00FF" ,"name3" : "FFFF00" } );

Use the render() method to retrieve and display changes in the UI.

setChartData(data, bRefresh)

Sets the data for the chart. The second parameter (bRefresh) is to delete the old data. If bRefresh is set to 'true', the old data is deleted and only the current data will render. If bRefresh is set to 'false', the current data is appended to the old data and rendered. The default value is 'false'. Use the render() method to retrieve and display changes in the UI.

removeListener()

Unregisters the control to cease receiving notifications for its events

render()

Loads the chart with the latest updated properties. Use this method to ensure that the changes done using any of the 'set' methods are reflected in the UI.

setFocus()

Causes an element to receive focus

setLabelColumn(labelColumn)

Sets the XPath reference of the label column in the business object. Data to be displayed on the label column is read from the business object based on the XPath specified. Use the render() method to retrieve and display changes in the UI.

setValueColumn(valueColumn)

Sets the XPath reference of the value columns in the business object. Data to be displayed on the value columns is read from the business object based on the XPath specified. Use the render() method to retrieve and display changes in the UI.

getChartObject()

Returns the fusion chart object.

setProperty(xPath, propertyName, value,nameSpaceURI)

Sets property value. This API provides more control on the chart to the user. Refer to Fusion Chart documentation for various properties and the corresponding values. * XPath: Required. XPath for the element in the chart object XML. Use "." as the XPath to set the properties on the root element.

• propertyName: Required. Name of the property to be set.
• value: Required.
• nameSpaceURI: Required if there is a namespace on the chart XML.
  Use the render() method to retrieve and display changes in the UI.